<template>
    <modal ref="modal_2"
           :title="title"
           :isCloseConfirm="false"
           top="5%"
           width="50%"
           height="50%"
           :close-on-click-modal="false"
           @modalOpened="opened"
           @modalClose="close">
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   v-model:page="page"
                   v-model:search = "search"
                   :permission="permissionList"
                   v-model="form"
                   ref="crud"
                   @sort-change="sortChange"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @row-dblclick="dblclick"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
            <template #createTime-search="{ disabled, size }">
                <div style="display: flex;flex-direction: start;">
                    <el-select v-model="search.createTimeRule" placeholder="比较" filterable clearable>
                        <el-option label="" value=""></el-option>
                        <el-option value=">" label="大于">大于 </el-option>
                        <el-option value=">=" label="大于等于">大于等于 </el-option>
                        <el-option value="=" label="等于">等于 </el-option>
                        <el-option value="!=" label="不等于">不等于 </el-option>
                        <el-option value="<=" label="小于等于">小于等于 </el-option>
                        <el-option value="<" label="小于">小于 </el-option>
                    </el-select>
                    <el-date-picker
                            size="default"
                            v-model="search.createTimeSearch"
                            type="date"
                            :format="dateFormat"
                            :value-format="dateFormat"
                            :unlink-panels="true"
                            clearable
                            placeholder="创建日期"
                            :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </div>
            </template>
        </avue-crud>
        <template #footerButton>
            <!--<el-button type="primary" icon="el-icon-plus"  @click="handleSubmit">确定</el-button>-->
            <el-button icon="el-icon-circle-close" @click="$refs.modal_2.handleClose()">关闭</el-button>
        </template>
    </modal>
</template>

<script>
    import {getList, getDetail, add, update, remove} from "@/api/anwise/work_list";
    import {mapGetters} from "vuex";

    export default {

        data() {
            return {
                emits: ["success"],
                title:"选择工序",
                form: {},
                query: {},
                loading: true,
                dateFormat: 'YYYY-MM-DD',
                pickerOptions: {},
                page: {
                    pageSize: 20,
                    currentPage: 1,
                    total: 0
                },
                search:{},
                selectionList: [],
                option: {
                    // height:'auto',
                    // calcHeight: 30,
                    tip: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    searchSpan:8,
                    border: true,
                    index: true,
                    selection: false,
                    labelWidth: 150,
                    menuWidth: 120,
                    menu:false,
                    indexWidth:100,
                    addBtn: false,
                    editBtn: false,
                    viewBtn: false,
                    delBtn: false,
                    stripe: true,
                    searchIndex: 3,
                    searchIcon: false,
                  searchEnter:true,
                    column: [
                        {
                            label: "",
                            prop: "id",
                            type: "input",
                            addDisplay: false,
                            editDisplay: false,
                            viewDisplay: false,
                            overHidden: true,
                            sortable: true,
                            hide: true,
                        },
                        {
                            label: "工序名称",
                            prop: "workName",
                            type: "input",
                            search: true,
                            overHidden: true,
                            sortable: true,
                            rules: [{
                                required: true,
                                message: "请输入工序名称",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "刀模说明",
                            prop: "dmRemark",
                            type: "input",
                            search: true,
                            overHidden: true,
                            sortable: true,
                        },
                        {
                            label: "机器说明",
                            prop: "jqRemark",
                            type: "input",
                            search: true,
                            overHidden: true,
                            sortable: true,
                        },
                        {
                            label: "备注",
                            prop: "remark",
                            type: "input",
                            search: true,
                            overHidden: true,
                            sortable: true,
                        },
                        {
                            label: "创建人员",
                            prop: "createUserName",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                        },
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.bom_list_add, false),
                    viewBtn: this.validData(this.permission.bom_list_view, false),
                    delBtn: this.validData(this.permission.bom_list_delete, false),
                    editBtn: this.validData(this.permission.bom_list_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        methods: {
            selectionLoad() {
                let arr = [];
                // console.log(this.selectionList);
                // if (this.selectionList && this.selectionList != null
                //     && this.selectionList.length > 0) {
                //     this.data.forEach(row => {
                //         if(this.selectionList.some((val) => val.id=== row.id)) {
                //             console.log("row.id1+"+row.id)
                //             arr.push(row);
                //         }
                //     })
                // } else {
                    console.log(this.data,this.arrayList);
                    if (this.arrayList) {
                        this.data.forEach(row => {
                            if(this.arrayList.some((val) => val.id=== row.id)) {
                                console.log("row.id2+"+row.id)
                                arr.push(row);
                            }
                        })

                    }
                // }
                this.$nextTick(() => {
                    arr.forEach(item => {
                        // this.$refs.crud.clearSelection();
                        console.log("check"+item.id)
                        this.$refs.crud.toggleRowSelection(item, true);
                    })
                })
            },
            showSelect(title) {
                this.title= title;
                this.$refs.modal_2.show();
                // this.onLoad(this.page);
            },
            clearData() {
                this.data = [];
                this.page.currentPage = 1;
            },
            clearSelection() {
                this.selectionList = [];
                this.arrayList = [];
                this.$refs.crud.toggleSelection();
            },
            searchReset() {
                this.query = {};
                this.search.createTimeSearch = "";
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1
                this.onLoad(this.page, params);
                done();
            },
            /** 双击选中*/
            dblclick(row) {
                this.$emit("success",row);
                this.$refs.modal_2.hide()
            },
            /**
             * 提交成功之后
             */
            submitAfter() {
                this.$refs.modal_2.hide()
            },
            handleSubmit() {
                console.log("setBankList")
                console.log(this.selectionList)
                this.$refs.modal_2.hide();
                this.$emit("setBankList",this.selectionList);

                // if (this.isAdd) {
                //   this.$refs.modal_2.handleClose()
                //   // this.$emit("success", this.selectionList);
                // } else if (this.isListAdd) {
                //
                //   // this.$emit("success", this.versionId, this.selectionList);
                // }
            },
            sortChange(val) {
                console.log(val)
                this.sort = {
                    prop: val.prop,
                    order: val.order
                };
                let order = "";
                if (this.sort.prop && this.sort.order) {
                    if (this.sort.order === "descending") {
                        order = `${this.sort.prop} desc`
                    } else {
                        order = `${this.sort.prop} asc`
                    }
                }
                this.query.orderBy = order;
                this.onLoad(this.page);
            },





            opened() {
                //  this.onLoad(this.page);
            },
            close() {
                this.clearData();
                this.clearSelection();
            },


            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
            },

            sizeChange(pageSize){
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            onLoad(page, params = {}) {
                this.loading = true;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                    // this.selectionLoad();
                    this.selectionClear();
                });
            },
            handleDatePickerChange(value) {
                console.log(this.search);
            },
        }
    };
</script>

<style>
    ::v-deep .el-table__row {
        height: 30px !important;
    }
    ::v-deep  .el-table__cell{
        padding:  5px !important;
    }

</style>
